<template>
  <!-- element-ui 级联组件 -->
  <el-cascader
    :value="value"
    :options="treeData"
    :props="keyProps"
    @change="changeValue"
    size="mini"
    separator="-"
  ></el-cascader>
</template>
<script>
import { getDepartmentListService } from "@/api/department.js";
import { transListToTreeData } from "@/utils/index";
export default {
  props: {
    value: {
      type: Number, //存储的是部门的id
      default: null,
    },
  },
  data() {
    return {
      treeData: [], // 赋值给级联组件的 options
      keyProps: {
        value: "id", // 要存储的字段
        label: "name", //要展示的字段
      },
    };
  },
  created() {
    this.getDepartment();
  },
  methods: {
    async getDepartment() {
      const res = await getDepartmentListService();
      const data = transListToTreeData(res.data, 0);
      this.treeData = data;
    },
    changeValue(data) {
      // console.log(data);
      // 取到数组的最后一次
      if (data.length > 0) {
        this.$emit("input", data[data.length - 1]); // 将最后一位的id传过去
      }
    },
  },
};
</script>
